<template>
  <div :class="[prefixCls]" :style="getStyle" class="enter-x">
    <div @click="handleGoBack" class="back">
      <Icon icon="i-simple-line-icons:action-undo"></Icon>
      <span class="ml-2 back-title">返回</span>
    </div>
  </div>
</template>
<script lang="ts">
  import type { CSSProperties } from "vue"
  import { defineComponent, computed } from "vue"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { Icon } from "/@/components/Icon"

  export default defineComponent({
    name: "GoBack",
    props: {
      prefix: {
        type: String,
        default: "goback",
      },
      style: {
        type: Object,
        required: false,
      }
    },
    components: { Icon },
    setup(props) {
      const { prefixCls } = useDesign("go-back")
      const symbolId = computed(() => `#${props.prefix}-${props.name}`)

      const getStyle = computed((): CSSProperties => {
        return props.style || {}
      })

      const handleGoBack = () => {
        window.history.go(-1)
      }
      return { handleGoBack, symbolId, prefixCls, getStyle }
    },
  })
</script>
<style lang="less" scoped>
  @prefix-cls: ~"@{namespace}-go-back";

  .@{prefix-cls} {
    display: inline-block;
    line-height: 0;
    background-color: #ffffff;
    border-radius: 5px;
    width: 100%;
    padding: 10px;
    margin: 0px 10px 10px 0px;
    
    .back {
      color: #8A92A6;
      cursor: pointer;
    }
  }
</style>
